/**
 * @file Home.tsx
 * @description 设计首页组件，包含搜索栏、日期显示和瀑布流展示区
 * @module Home
 */

import React, { useState, useRef } from "react";
import { Input, Button } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import styles from "./Home.module.css";
// 导入自定义组件
import Calendar from "../../../components/Calendar";
import DateDisplay from "../../../components/DateDisplay";
import VirtualWaterfall from "./components/VirtualWaterfall";

// 模拟数据
const mockData = Array.from({ length: 50 }, (_, index) => {
  // 生成更合理的图片尺寸
  const width = 800;
  const height = Math.floor(Math.random() * 600) + 600; // 600-1200之间的随机高度
  return {
    id: `item-${index}`,
    imageUrl: `https://picsum.photos/seed/${index}/${width}/${height}`,
    height,
    width,
  };
});

/**
 * 设计首页组件
 * @component
 * @description 设计系统的首页，集成搜索功能、日期展示和瀑布流布局的内容展示
 * @returns {JSX.Element} 设计首页组件
 */
const Home: React.FC = () => {
  /**
   * 状态管理
   * @state {boolean} showCalendar - 控制日历组件的显示状态
   */
  const [showCalendar, setShowCalendar] = useState(false);

  /**
   * Refs
   * @ref {number | null} timeoutRef - 用于存储定时器ID，处理鼠标移出事件的延迟隐藏
   */
  const timeoutRef = useRef<number | null>(null);

  /**
   * 鼠标进入DateDisplay组件的处理函数
   * @function handleMouseEnter
   * @description 清除可能存在的隐藏定时器，并显示日历组件
   */
  const handleMouseEnter = () => {
    // 清除可能存在的隐藏定时器
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    setShowCalendar(true);
  };

  /**
   * 鼠标离开DateDisplay组件的处理函数
   * @function handleMouseLeave
   * @description 设置延迟定时器，给用户时间移动到弹出的日历上
   */
  const handleMouseLeave = () => {
    // 设置200ms延迟，优化用户体验
    timeoutRef.current = window.setTimeout(() => {
      setShowCalendar(false);
    }, 200);
  };

  return (
    <div>
      {/* 页面头部：搜索栏和日期显示区域 */}
      <div className={styles.header}>
        {/* 搜索功能区域 */}
        <div className={styles.searchContainer}>
          <Input 
            placeholder="搜索设计模板..." 
            className={styles.searchInput}
          />
          <Button 
            type="primary" 
            className={styles.searchButton}
          >
            <SearchOutlined style={{ fontSize: 26 }} />
          </Button>
        </div>

        {/* 日期显示区域：包含日期展示和弹出日历 */}
        <div
          className={styles.dateContainer}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          {/* 日期显示组件 */}
          <DateDisplay />
          
          {/* 条件渲染的日历弹出框 */}
          {showCalendar && (
            <div
              className={styles.calendarPopup}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <Calendar />
            </div>
          )}
        </div>
      </div>

      {/* 主要内容区域：瀑布流布局展示 */}
      <div className={styles.content}>
        <VirtualWaterfall 
          data={mockData}
          columnCount={6}
          columnGap={16}
          rowGap={16}
        />
      </div>
    </div>
  );
};

export default Home;